<!--
// 
// ShowMetairl.vue
//
// Created by 区区电脑 on 2024/04/29.
//
-->
<template>
    <g-drawer v-model="visible" :title="title" :width="layout.modalWidth(900)" :z-index="1001" footer-shadow show-cover @close="cancelClick">
        <template #header>
            <el-button v-if="$hasOneOk(state.model.state, [1, 3])&&state.model.currentHandlerId===myInfo.id" type="primary" @click="onOperation(2)">指派</el-button>
            <el-button v-if="$hasOneOk(state.model.state, [1, 3])&&state.model.currentHandlerId===myInfo.id" type="success" @click="onOperation(3)">完成修复</el-button>
            <el-button v-if="$hasOneOk(state.model.state, [1])&&state.model.currentHandlerId===myInfo.id" type="warning" @click="onOperation(4)">拒绝</el-button>
            <el-button v-if="$hasOneOk(state.model.state, [2])&&state.model.currentHandlerId===myInfo.id" type="success" @click="onOperation(5)">通过</el-button>
            <el-button v-if="$hasOneOk(state.model.state, [2])&&state.model.currentHandlerId===myInfo.id" type="danger" @click="onOperation(6)">未通过</el-button>
            <el-button v-if="state.model.createdUserId === myInfo.id" @click="onOperation(7)">关闭</el-button>
            <!--            <el-button plain type="primary" @click="onOperation(9)">修改</el-button>-->
        </template>
        <DebugInfo v-loading="isLoading" :info="state.model" @delete="res => emits('delete', res)" @edit="res => emits('edit', res, loadTaskInfo)" />
        <el-divider border-style="dashed"></el-divider>
        <LogList :list="state.logList" />
        <template #footer>
            <SendComment :task-id="state.model.id" @sended="loadTaskInfo" />
        </template>
        <teleport to="body">
            <Appoint ref="appoint" />
            <Finish ref="finish" />
            <Reject ref="reject" />
            <Approved ref="approved" />
            <NotApproved ref="notApproved" />
            <Closed ref="closed" />
            <!--            <PartEdit ref="partEdit" />-->
        </teleport>
    </g-drawer>
</template>

<script setup>
import {ref, reactive, computed, onMounted, watch} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "./api.js"
import {useStore} from "vuex";
import DebugInfo from "./Components/DebugInfo.vue"
import SendComment from "./Components/SendComment.vue"
import LogList from "./Components/LogList.vue"
import Appoint from "./Operation/Appoint.vue"
import Finish from "./Operation/Finish.vue"
import Reject from "./Operation/Reject.vue"
import Approved from "./Operation/Approved.vue"
import NotApproved from "./Operation/NotApproved.vue"
import Closed from "./Operation/Closed.vue"
// import PartEdit from "./Operation/PartEdit.vue"


const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message, $hasOneOk} = window;

const emits = defineEmits(["edit", "delete", "reload"]);

const Model = () => {
    return {}
}
// store
const store = useStore();
const myInfo = computed(() => store.getters.userInfo)

function toBody() {
    return document.documentElement
}

/**
 * 操作
 * @param type
 */
const appoint = ref()
const finish = ref()
const reject = ref()
const approved = ref()
const notApproved = ref()
const closed = ref()

// const partEdit = ref()
function onOperation(type) {
    const lastLogUser = getLastUser()
    const options = {
        type,
        taskId: state.options.id
    }
    if (type === 2) {
        appoint.value.show({
            title: "指派",
            options: options,
            ok() {
                emits("reload")
                cancelClick()
            }
        })
    }
    if (type === 3) {
        options.toUserId = state.model.createdUserId
        options.toUserName = state.model.createdUserName
        finish.value.show({
            title: "完成，提交审核",
            options: options,
            ok() {
                emits("reload")
                cancelClick()
            }
        })
    }
    if (type === 4) {
        options.toUserId = state.model.createdUserId
        options.toUserName = state.model.createdUserName
        reject.value.show({
            title: "拒绝",
            options: options,
            ok() {
                emits("reload")
                cancelClick()
            }
        })
    }
    if (type === 5) {
        approved.value.show({
            title: "通过",
            options: options,
            ok() {
                emits("reload")
                cancelClick()
            }
        })
    }
    if (type === 6) {
        options.toUserId = lastLogUser.toUserId
        options.toUserName = lastLogUser.toUserName
        notApproved.value.show({
            title: "未通过",
            options: options,
            ok() {
                emits("reload")
                cancelClick()
            }
        })
    }
    if (type === 7) {
        closed.value.show({
            title: "关闭任务",
            options: options,
            ok() {
                emits("reload")
                cancelClick()
            }
        })
    }
    // if (type === 9) {
    //     partEdit.value.show({
    //         title: "修改",
    //         options: options,
    //         ok() {
    //             emits("reload")
    //             loadTaskInfo()
    //         }
    //     })
    // }
}

// 获取最新日志中的指派人（忽略掉评论日志）
function getLastUser() {
    for (let i = 0; i < state.logList.length; i++) {
        let log = state.logList[i];
        if (log.Type !== 8) {
            return {
                // 上一步的指派人作为被指派处理人
                toUserId: log.fromUserId,
                toUserName: log.fromUserName,
            };
        }
    }
    return {};
}

/**
 * 查详情
 * @returns {Promise<void>}
 */
async function loadTaskInfo() {
    isLoading.value = true
    const {data} = await api.GetDebugInfo({id: state.options.id})
    isLoading.value = false
    state.model = {...state.model, ...data}
}

/**
 * 查操作日志
 * @returns {Promise<void>}
 */
async function loadLogList() {
    const {data} = await api.GetDebugLogList({taskId: state.options.id});
    state.logList = (data || []).sort((a, b) => {
        return new Date(b.createdTime).getTime() - new Date(a.createdTime).getTime();
    });
}

// 表单显示
async function show(config) {
    if (visible) {
        cancelClick()
        await window.$sleep(100)
    }
    setOptions(config);
    state.model = Model();
    state.logList = [];
    loadTaskInfo()
    loadLogList()
}

function close() {
    cancelClick()
}

onMounted(() => {
})
defineExpose({
    show,
    close
})
</script>


<style lang="scss" scoped>
.search-row {
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    .label {
        padding-right: 10px;
        font-size: 14px;
    }
}
</style>